<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14">
        <div>
          <el-alert title="标准答案" type="success" center class="ques" :closable="false"></el-alert>

          <!-- +1 -->
          <!-- questions从后端获取的题目集，itemnum当前的题目号,question有两个属性，一个为content，一个是id -->
          <!-- {{questions[itemnum].details}} -->
          <div class="areaq">{{stand_ans}}</div>

          <div class="medium">
            <el-radio v-model="type" label="1">严厉模式</el-radio>
            <el-radio v-model="type" label="0">宽松模式</el-radio>
          </div>

          <el-alert title="用户回答" type="error" effect="dark" center :closable="false" class="ans"></el-alert>

          <!-- 改v-model +1 -->
          <el-input
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 7}"
            placeholder="答题区域"
            class="in"
            v-model="answer"
          ></el-input>

          <el-button type="danger" @click="submit" size="medium" class="btn2">确认提交</el-button>
        </div>
      </el-col>
      <el-col :span="9" :offset="1">
        <div class="result">
          <el-alert title="答题情况" type="success" effect="dark" center :closable="false"></el-alert>

          <div class="all">
            <!-- +1 -->
            <div class="areas">
              <span>得分</span>
              <span class="fon">{{score}}</span>
              <span>相似度</span>
              <span class="sec">
                {{similarity}}
                <span v-if="flag == 1">%</span>
              </span>
              <el-progress type="circle" :percentage="Number(similarity)" v-if="flag == 1"></el-progress>
            </div>

            <div class="areak">
              <span>关键词</span>
              <div class="det" v-for="(item,index) in keywords" :key="index">
                <div class="p1">{{item}}---{{keyScore[index]}}</div>
                <!-- stroke-width宽度 -->
                <!-- text-inside 属性来将进度条描述置于进度条内部 -->
                <el-progress
                  :text-inside="true"
                  :stroke-width="10"
                  :percentage="userKeyScore[index]"
                  status="exception"
                  color="#E0E0E0"
                ></el-progress>
              </div>
            </div>

            <div id="main"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stand_ans:
        '配送要素：集货、储存、分拣和拣选、配货、配装、配送运输、送达服务。',
      answer: '',
      score: null,
      keywords: [],
      keyScore: [],
      userKeyScore: [],
      type: '1',
      similarity: '',
      flag: 0,

      indi: [],
      option: {
        title: {
          text: '得分点相似度',
          //left: 'center' // 标题中间
          textStyle: {
            color: '#30b42f', //标题颜色
            fontSize: 16
          }
        },

        // 图表位置
        grid: {
          position: 'center'
        },
        tooltip: {},
        legend: {
          // show: true,
          // data: ['风险评估']
        },
        radar: {
          // shape: 'circle',
          splitNumber: 4,
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [5, 5]
            }
          },
          indicator: [
            {
              name: '攻击途径',
              max: 10
            },
            {
              name: '攻击难度',
              max: 10
            },
            {
              name: '权限要求',
              max: 10
            },
            {
              name: '机密性影响',
              max: 10
            },
            {
              name: '完整性影响',
              max: 10
            },
            {
              name: '可用性影响',
              max: 10
            }
          ],
          radius: 50 //用于文字显示不全的调整
        },
        series: [
          {
            name: '得分点相似度',
            type: 'radar',
            areaStyle: {
              normal: {
                width: 1,
                opacity: 0.7
              }
            },
            data: [
              {
                itemStyle: {
                  normal: {
                    color: '#67abff',
                    lineStyle: {
                      color: '#67abff'
                    }
                  }
                },
                value: [3, 5, 8, 9, 10, 8]
              }
            ]
          }
        ]
      },

      userKeySimilarity: [100, 37.8, 100, 0, 100]
    }
  },

  watch: {
    //观察option的变化
    //后台会改变option的
    option: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.drawMap()
        } else {
          this.drawMap()
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },

  methods: {
    drawMap() {
      console.log(this.indi)
      var myChart = this.$echarts.init(document.getElementById('main'))
      myChart.setOption(this.option)
    },

    // 表
    toData(arr) {
      for (var i = 0; i < arr.length; i++) {
        this.indi.push({
          max: 100,
          name: arr[i]
        })
      }
      this.option.radar.indicator = this.indi
    },

    submit() {
      this.keywords = [
        '集货',
        '储存',
        '分拣和挑选',
        '配货',
        '配装',
        '配送运输',
        '送达服务'
      ]
      this.keyScore = [1, 1, 2, 1, 1, 2, 2]
      if (this.type == '1') {
        this.score = 6
        this.similarity = '71.26'
        this.userKeyScore = [100, 100, 100, 100, 100, 0, 0]
      } else {
        this.score = 7
        this.similarity = '71.26'
        this.userKeyScore = [100, 100, 100, 100, 100, 50, 0]
      }
      this.flag = 1

      this.userKeySimilarity = [100, 100, 100, 100, 100, 47.8, 0]
      this.option.series[0].data[0].value = this.userKeySimilarity
      this.toData(this.keywords)
      this.drawMap()
    }
  }
}
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 280px;
  margin-left: -5px;
}

.fon {
  font-size: 40px !important;
  margin-left: 30px;
  margin-right: 15px;
  color: red !important;
  vertical-align: -8px;
}

.btn2 {
  margin-top: 20px;
  margin-left: 220px;
}

.ques {
  background: #2946e0 !important;
  color: #fff !important;
  // text-align: center;
}

.medium {
  margin-left: 150px;
}

.areaq {
  background: #e8ebfe;
  height: 120px;
  margin-bottom: 44px;
  padding-top: 10px;
  padding-left: 20px;
}

.ans {
  margin-top: 44px;
}

.in {
  /deep/ .el-textarea__inner {
    background-color: #fddbd9;
  }
}

.result {
  background: #e8f4e8;
  min-height: 473px;
  span {
    font-size: 16px;
    color: #30b42f;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .all {
    margin-left: 30px;
    > div {
      margin: 20px 0px;
    }
  }
}

.areas {
  min-height: 50px;
  font-size: 14px;
  color: black;
  .sec {
    margin-left: 15px;
    color: black;
  }
  .el-progress {
    vertical-align: -20px;
    margin-left: 10px;
    /deep/ .el-progress__text {
      font-size: 12px !important;
    }
  }

  /deep/ .el-progress-circle {
    width: 50px !important;
    height: 50px !important;
  }
}

.areak {
  min-height: 50px;
}

.det {
  margin-top: 5px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  display: flex;
  .p1 {
    flex: 2;
  }

  .el-progress {
    margin-right: 10px;
    flex: 1;
  }

  /deep/ .el-progress-bar__outer {
    background-color: #e0e0e0 !important;
  }

  /deep/ .el-progress-bar__inner {
    background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
    line-height: 9px;
  }
}
</style>
